<template>
    <div>
        <van-nav-bar
            title="提交订单"
            left-text="返回"
            left-arrow
            @click-left="$router.back()"
        />
        <van-contact-card
            type="edit"
            name="张三 188****1234"
            tel="成都市金牛区九里堤西路2号"
        />
        <div class="goods-list">
            <van-card
                v-for="g in goodsArray"
                :key="g.id"
                :num="g.count"
                :price="(g.price / 100).toFixed(2)"
                :title="g.title"
                :thumb="g.picture"
            />
        </div>
        <van-submit-bar
            :price="totalPrice"
            button-text="提交订单"
            @submit="onSubmit"
        />
    </div>
</template>
<script>
import { Dialog } from "vant";
import api from "../components/api";
export default {
    data() {
        return {
            uid:0,
            from: "",
            goods: [],
            goodsArray: [],
            ids: [],
            counts: {},
        };
    },
    mounted() {
        // 判断是否已经登录
        if (!sessionStorage.getItem("userinfo")) {
            // 没有登录信息 直接跳转到登录
            Dialog.alert({
                title: "提示",
                message: "您还没有登录,请先登录",
            }).then(() => {
                // 直接替换当前页面未登录页面
                this.$router.replace("/login");
            });
            return;
        } else {
            // 已经登录 则获取用户信息
            const userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
            this.uid = userinfo.id; // 取得用户id并存储
            this.parseParam();
        }
    },
    computed: {
        // 计算属性 - 总价
        totalPrice() {
            let totalPrice = 0;
            this.goodsArray.forEach((g) => {
                totalPrice += g.price * g.count; // 计算每个商品的价格
            });
            return totalPrice;
        },
    },
    methods: {
        onSubmit() {
            api.post(
                `/carts/submit?uid=${this.uid}&from=${this.from}&price=${this.totalPrice}`,
                this.goodsArray);
        },
        // 判断请求的参数
        parseParam() {
            // 获取到参数
            try {
                const from = this.$route.query.from,
                    goods = JSON.parse(this.$route.query.goods);
                this.from = from;
                this.goods = goods;
                goods.forEach((g) => {
                    this.ids.push(g.id);
                    this.counts[g.id] = g.count;
                });
                // 使用商品编号查询信息
                this.loadGoodsData();
            } catch (e) {
                Dialog.alert({
                    title: "提示",
                    message: "参数错误",
                }).then(() => {
                    // 返回上一页
                    this.$router.back();
                });
            }
        },
        loadGoodsData() {
            const ids = this.ids.join(",");
            api.get("/goods/list-info?ids=" + ids)
                .then((ret) => {
                    if (ret.code == 0) {
                        ret.data.forEach((g) => {
                            g.count = this.counts[g.id];
                        });
                        this.goodsArray = ret.data;
                    }
                    console.log(ret);
                })
                .catch((err) => {
                    Dialog.alert({
                        title: "提示",
                        message: "查询商品失败",
                    }).then(() => {
                        // 返回上一页
                        this.$router.back();
                    });
                });
        },
    },
};
</script>
